.time-panel {
    border: 1px solid #ced4da;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: var(--bs-border-radius);
    width: 180px;
    user-select: none;

    .time-panel-content {
        font-size: 0;
        position: relative;
        overflow: hidden;

        &:before {
            padding-left: 50%;
            margin-right: 12%;
            margin-left: 12%;
        }

        &:after {
            left: 50%;
            margin-left: 12%;
            margin-right: 12%;
        }

        &.has-seconds {
            &:before {
                padding-left: 33.33333%;
            }

            &:after {
                left: 66.66667%;
                pointer-events: none;
            }
        }

        &:after, &:before {
            content: "";
            top: 50%;
            position: absolute;
            margin-top: -36.6px;
            height: 36.6px;
            left: 0;
            right: 0;
            border-top: 1px solid #e4e7ed;
            border-bottom: 1px solid #e4e7ed;
        }
    }

    .time-spinner {
        width: 100%;
        white-space: nowrap;

        &.has-seconds {
            .time-spinner-wrapper {
                width: 33.3%;

                &.is-arrow {
                    box-sizing: border-box;
                    text-align: center;
                    overflow: hidden;
                }
            }
        }

        .time-spinner-wrapper {
            display: inline-flex;
            position: relative;
            align-items: center;
            justify-content: center;

            &.is-arrow {
                .time-spinner-list {
                    transition: transform .3s linear
                }
            }

            .time-spinner-arrow {
                font-size: 14px;
                color: #909399;
                position: absolute;
                left: 0;
                width: 100%;
                z-index: 1;
                text-align: center;
                height: 30px;
                line-height: 30px;
                cursor: pointer;

                &:hover {
                    color: #409eff;
                }

                &.time-up {
                    top: 10px;
                }

                &.time-down {
                    bottom: 10px;
                }
            }

            .time-spinner-list-wrapper {
                overflow: hidden;
                height: 110px;
                margin: 40px 0;
                width: 100%;

                .time-spinner-list {
                    margin: 0;
                    list-style: none;

                    .time-spinner-item {
                        height: 36.6px;
                        line-height: 36.6px;
                        font-size: 12px;
                        color: #606266;
                        opacity: 0.6;
                        cursor: pointer;

                        &.active:not(.disabled) {
                            font-weight: 700;
                            font-size: 14px;
                            opacity: 1;
                            color: #409eff;
                        }

                        &.prev, &.next {
                            opacity: 0.8;
                            transform: scale(1, 0.8);
                            line-height: 30px;
                        }
                    }
                }
            }
        }
    }

    .time-panel-footer {
        border-top: 1px solid #e4e4e4;
        padding: 4px;
        height: 36px;
        line-height: 25px;
        text-align: right;

        .time-panel-btn {
            border: none;
            line-height: 28px;
            padding: 0 5px;
            margin: 0 5px;
            cursor: pointer;
            background-color: transparent;
            outline: none;
            font-size: 12px;
            color: #303133;

            &.confirm {
                font-weight: 800;
                color: #409eff;
            }
        }
    }
}

.time-spinner-input.input .input-inner, .time-spinner-list {
    padding: 0;
    text-align: center;
}
